<template>
  <section class="chart-container">
    <el-row :gutter="2" type="flex" class="bg_white" v-if="belongunit=='3'">
      <el-col :span="6">
        <div class="bg_con bg_con01" @click="this.goSupervise">
          <p>
            <span>脱幅项目数</span>
          </p>
          <h1>{{topData.num1}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con02" @click="this.goSupervise2">
          <p>
            <span>项目总数</span>
          </p>
          <h1>{{topData.num2}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con03" @click="goAssess">
          <p>
            <span>逾期上报（牵头单位）</span>
          </p>
          <h1>{{topData.num3}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con04" @click="this.goSupervise3">
          <p>
            <span>逾期上报（区镇办事处）</span>
          </p>
          <h1>{{topData.num4}}</h1>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="2" type="flex" class="bg_white" v-else>
      <el-col :span="6">
        <div class="bg_con bg_con01" @click="this.goSupervise">
          <p>
            <span>脱幅项目数</span>
          </p>
          <h1>{{topData.num1}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con02" @click="this.goSupervise2">
          <p>
            <span>项目总数</span>
          </p>
          <h1>{{topData.num2}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con03" @click="this.goAssess">
          <p>
            <span>逾期未填报绩效</span>
          </p>
          <h1>{{topData.num3}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con04" @click="this.goSupervise3">
          <p>
            <span>项目逾期未更新</span>
          </p>
          <h1>{{topData.num4}}</h1>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top:20px">
      <h1 style="font-size:20px;font-weight:bold;text-align:center">逾期上报项目列表</h1>
    </el-row>
    <el-row>
      <el-table :data="tableData" style="width: 100%;font-size:13px;margin: 20px auto">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="hash.pname" label="项目名称"></el-table-column>
        <el-table-column prop="hash.nname" label="所属指标"></el-table-column>
        <el-table-column prop="hash.typename" label="所属类别"></el-table-column>
        <!-- <el-table-column prop="hash.intime" label="最后更新时间"></el-table-column>
        <el-table-column label="本月状态">
          <template slot-scope="scope">
            <span v-if="scope.row.hash.status=== '0'">未更新</span>
            <span v-else-if="scope.row.hash.status=== '1'">已更新</span>
            <span v-else style="color: red">要求重填</span>
          </template>
        </el-table-column> -->
        <el-table-column label="是否脱幅">
          <template slot-scope="scope">
            <span v-if="scope.row.hash.pg_status=== '0'">否</span>
            <span v-else style="color: red">是</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
        >
          <template slot-scope="scope">

            <el-button
              type="primary"
              size="small"
              @click="checkXM(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :currentPage.sync="currentPage3"
        :pageSize="pagesize"
        layout="prev, pager, next, jumper"
        :total="total"
        style="text-align:center"
      ></el-pagination>
    </el-row>
    <el-row justify="space-around" class="c_top1">
      <el-col :span="8">
        <div id="tab1" style="width:100%; height:400px;background:#fff"></div>
      </el-col>
      <el-col :span="6" style="border:1px solid #f1f1f1;height:501px">
        <div>
          <p class="title_p">区镇/办事处完成率 TOP3</p>
          <ul class="top_ul">
            <li v-for="(item,index) in topList" :key="item.id">
              <span>Top {{index+1}} :</span>
              <span>{{item.hash.orgname}}</span>
              <span>{{Number(item.hash.orderval).toFixed(2)}}%</span>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="10">
        <div id="tab3" style="width:100%; height:400px;background:#fff"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-select v-model="zrdw" placeholder="责任单位" style="width:200px" clearable>

          <el-option
            v-for="item in zrdwdata"
            :key="item.hash.orgid"
            :label="item.hash.orgname"
            :value="item.hash.orgid"
          >
          </el-option>
        </el-select>
        <el-button @click="drawCharts">查询</el-button>
      </el-col>
      <el-col :span="10">
        <h1 style="font-size:20px;font-weight:bold">项目状态统计分析</h1>
      </el-col>


    </el-row>
    <el-row>
      <div id="tab4" style="width:100%; height:500px;background:#fff"></div>
    </el-row>
    <el-dialog
      title="基本信息"
      :visible.sync="showS"
      width="70%"
    >
      <el-form labelWidth="140px" style="height:450px">
        <el-form-item label="资金来源及金额：">

          <span v-if="xmData.source1&&xmData.amount1" style="margin-right:10px">{{xmData.source1}} {{xmData.amount1}}(万元)</span>
          <span v-if="xmData.source2&&xmData.amount2" style="margin-right:10px"> {{xmData.source2}} {{xmData.amount2}}(万元)</span>
          <span v-if="xmData.source3&&xmData.amount3"> {{xmData.source3}} {{xmData.amount3}}(万元)</span>
        </el-form-item>
        <el-form-item label="所属指标：">
          <el-input v-model="xmData.nname"></el-input>
        </el-form-item>
        <el-form-item label="所属类别：">
          <el-input v-model="xmData.pclassifyname"></el-input>
        </el-form-item>
        <el-form-item label="项目名称：">
          <el-input v-model="xmData.pname"></el-input>
        </el-form-item>
        <el-form-item label="项目概况：">
          <el-input v-model="xmData.ptext"></el-input>
        </el-form-item>
        <el-form-item label="项目级别：">
          <el-input v-model="xmData.pgrade"></el-input>
        </el-form-item>


        <el-form-item label="牵头部门：">
          <el-input v-model="xmData.assessunitname"></el-input>
        </el-form-item>
        <el-form-item label="责任单位：">
          <el-input v-model="xmData.orgname"></el-input>
        </el-form-item>
        <el-form-item label="计划开工时间：">
          <el-input v-model="xmData.begindate"></el-input>
        </el-form-item>
        <el-form-item label="计划竣工时间：">
          <el-input v-model="xmData.enddate"></el-input>
        </el-form-item>
        <el-form-item label="项目地址：">
          <el-input v-model="xmData.address"></el-input><el-button @click="innerVisible1=true" type="primary">查看地图</el-button>
        </el-form-item>
        <el-form-item label="联系人：">
          <el-input v-model="xmData.linkman"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：">
          <el-input v-model="xmData.tel"></el-input>
        </el-form-item>
      </el-form>
      <p class="line">
        进度更新记录
      </p>
      <el-table
        :data="tableData1" style="width: 92%;font-size:13px;margin: 20px auto"
      >
        <el-table-column
          label="更新时间"
          prop="hash.intime"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          prop="hash.statusname"
        >

        </el-table-column>
        <el-table-column
          label="项目状态"
          prop="hash.pgname"
        >

        </el-table-column>
        <el-table-column
          label="项目进度(%)"
          prop="hash.pgvalue"
        >

        </el-table-column>
        <el-table-column
          label="整治照片"
        >
          <template slot-scope="scope">
            <img :src="scope.row.hash.beforeimage" height="50" style="margin-bottom:5px" @click="showimg(scope.row.hash.beforeimage)">
            <img :src="scope.row.hash.laterimage" height="50" @click="showimg(scope.row.hash.laterimage)">
          </template>
        </el-table-column>
        <el-table-column
          label="作证材料"
          prop="hash.intime"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="viewcl(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          prop="status"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="showwrite(scope.row)">重填</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="60%"
        title="查看地址"
        top="0"
        :visible.sync="innerVisible1"
        appendToBody
      >
        <qqmap :chooseLocal="chooseLocal" :isshowMap="this.isshowMap" v-if="isRouterAlive"></qqmap>
      </el-dialog>
      <el-dialog

        title="作证材料"
        :visible.sync="showcl"

        appendToBody
      >
        <el-table
          :data="tableData2"
        >

          <el-table-column
            prop="hash.fname"
            label="附件名称"
          >
          </el-table-column>
          <el-table-column
            prop="hash.intime"
            label="上传时间"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <a :href="scope.row.hash.furl">下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <el-dialog
        title="重填"
        heigt="60%"
        :visible.sync="showcl2"
        appendToBody
      >
        <el-form labelWidth="140px">
          <el-form-item label="限期时间" style="width:100%" class="is-required">
            <el-date-picker
              style="width:100%"
              v-model="writetime"
              valueFormat="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="交办意见" style="width:100%" class="is-required">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="remark"
              v-validate="'required'" name="理由"
            >
            </el-input>
            <div class="el-form-item__error">{{ errors.first('理由') }}</div>
          </el-form-item>
          <el-form-item label="附件" style="width:100%">
            <el-upload
              class="upload-demo"
              action="url"
              :fileList="fileList"
              multiple
              :limit="1"
              :autoUpload="false"
              :onChange="changefileList"
              ref="upload"
              :httpRequest="upload3"
              :onRemove="removeImg3"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showcl2 = false">取 消</el-button>
          <el-button type="primary" @click="dowrite">提 交</el-button>
        </span>

      </el-dialog>
    </el-dialog>

  </section>
</template>

<script>
import echarts from 'echarts';
import qqmap from '~/components/common/qqmap.vue';
import '../../static/css/index.css';
/* 引入样式 */
export default {
  props: ['headTitle'],
  data() {
    return {
      chooseLocal: {
        lat: '31.385332',
        lng: '120.980754',
      },
      id: '',
      isshowimg: false,
      writetime: '',
      tableData2: [],
      remark: '',
      bigimg: '',
      showcl2: false,
      showcl: false,
      innerVisible1: false,
      isRouterAlive: true,
      ts: this.newStore(),
      belongunit: localStorage.getItem('belongunit'),
      tab1data: {},
      showS: false,
      tableData1: [],
      xmData: {},
      tab3data: {},
      topData: {},
      chartBar: null,
      topList: [],
      currentPage3: 1,
      pagesize: 10,
      total: 10,
      zrdw: '',
      zrdwdata: [],
      oldFileName: [],
      newFileUrl: [],
      fileList: [],
      tableData: [],
      tab6data2: [],
      tab6data3: [],
      tab6data4: [],
      seriesData: [],
      typename: [],
      checkitem: {},
    };
  },
  components: {
    qqmap,
  },
  created() {
    this.getzrbm();
    this.getProjectList();
    this.gettopData();
    this.getTOP();
  },
  methods: {
    getzrbm() {
      const req5 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BC327730680009A98',
        suporgid: '2',
      };
      this.spost(this.ts, '/mainservlet', req5).then((ts) => {
        this.zrdwdata = ts.d.data.operation1;
      });
    },
    dowrite() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680A44B926655063AD8D760B72E2D1B9492',
            id: this.id,
            writetime: this.writetime,
            remark: this.remark,
            oldFileName: this.oldFileName,
            newFileUrl: this.newFileUrl,
          };
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.checkXM(this.checkitem);
              this.writetime = '';
              this.remark = '';
              this.fileList = [];
              this.showcl2 = false;
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    showimg(url) {
      this.isshowimg = true;
      this.bigimg = url;
    },
    changefileList(file) {
      const flieData = {};
      file = file.raw;
      const fileType = file.type;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        const a = event.target.result;
        const sendData = a.replace(`data:${fileType};base64,`, '');
        flieData.name = file.name;
        flieData.data = sendData;
        this.fileList.push(flieData);
        this.upload3();
      };
    },
    upload3() {
      for (let i = 0; i < this.fileList.length; i += 1) {
        const req = {};
        req.oriFileName = this.fileList[i].name;
        req.value = this.fileList[i].data;
        this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
          this.oldFileName.push(ts.d.oldFileName);
          this.newFileUrl.push(ts.d.newFileUrl);
        });
      }
    },
    removeImg3(file) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
    },
    viewcl(item) {
      this.showcl = true;

      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B76806E6C4F647ADC525A5E85279393623265BFF0B9210751F692',
        id: item.hash.id,
      };

      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.tableData2 = ts.d.data.operation2;
      });
    },
    showwrite(item) {
      this.showcl2 = true;
      this.id = item.hash.id;
    },
    isshowMap() {
      this.reload();
      this.innerVisible1 = !this.innerVisible1;
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    handleCurrentChange() {
      this.getProjectList();
    },
    checkXM(item) {
      this.showS = true;
      this.checkitem = item;
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680B80A9177C0749743021A445010569AEF',
        id: item.hash.id,
      };
      const req1 = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B76806E6C4F647ADC525AF42869BB2FF1015BBFF0B9210751F692',
        pid: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.xmData = ts.d.data.operation1[0].hash;
        console.log(this.xmData);
        this.chooseLocal.lat = this.xmData.lat;
        this.chooseLocal.lng = this.xmData.lon;
        console.log('this.chooseLocal', this.chooseLocal);

        // this.getSX2(this.xmData.propertyid);
        // this.getSX3(this.xmData.nid);
        this.xmData.xmStatus = item.hash.statusname;
      });
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.tableData1 = ts.d.data.operation1;
        console.log(this.tableData1);
      });
    },
    getProjectList() {
      const req = {
        handle:
          '2E8E7DE13E3E62949CFDA5DB7E2B768080D0A44ECD7821CA44B455B1B2775577',
        assessunit: '',
        orgid: '',
        queryparam: '',
        isouter: '',
        pg_status: '',
        start: (this.currentPage3 - 1) * this.pagesize,
        limit: this.pagesize,
      };

      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.tableData = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    goAssess() {
      if (this.belongunit == '1' || this.belongunit == '3') {
        this.$router.push({
          path: '/glperformance',
          query: {
            from: 'glhome',
          },
        });
      }
    },
    goSupervise3() {
      this.$router.push({ path: '/glpm/supervise', query: { isstatus: '0' } });
    },
    goSupervise2() {
      this.$router.push('/glpm/supervise');
    },
    goSupervise() {
      this.$router.push({ path: '/glpm/supervise', query: { istf: '1' } });
    },
    gettopData() {
      if (localStorage.getItem('belongunit') == '1') {
        const req1 = {
          handle: '897AEEB66312B81B4CB3F05340231FDB59DAEA5126B4B231',
        };
        this.spost(this.ts, '/mainservlet', req1).then((ts) => {
          this.topData = ts.d.data.operation1[0].hash;
        });
      } else {
        const req2 = {
          handle: '897AEEB66312B81B7F3B707724B3CC828575EA26D2F79D60',
        };
        this.spost(this.ts, '/mainservlet', req2).then((ts) => {
          this.topData = ts.d.data.operation1[0].hash;
        });
      }
    },
    getTOP() {
      const req = {
        handle: '897AEEB66312B81B368784114B8B87D7B7243D103B96D6D8',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.topList = ts.d.data.operation1;
      });
    },
    drawCharts() {
      // 项目总体完成情况
      const req1 = {
        handle: '897AEEB66312B81B368784114B8B87D7B8C2CA86EF40FD11',
      };
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.tab1data = ts.d.data.operation1;
        this.tab1();
      });

      // 项目总体完成情况
      const req6 = {
        handle:
          '897AEEB66312B81B7F3B707724B3CC82635DFC73902885AA8F627246A616D2CA',
        orgid: this.zrdw,
      };
      this.typename = [];
      this.typeList = [];
      this.tab6data2 = [];
      this.tab6data4 = [];
      this.tab6data3 = [];
      this.seriesData = [];
      this.spost(this.ts, '/mainservlet', req6).then((ts) => {
        this.tab6data2 = ts.d.data.operation2;
        this.tab6data4 = ts.d.data.operation4;
        this.tab6data3 = ts.d.data.operation3;
        this.typeList = ts.d.data.operation1;

        const hashdata = {
          data: [],
          name: '前期工作',
          type: 'line',
          stack: '总量',
        };
        const hashdata4 = {
          data: [],
          name: '已完成',
          type: 'line',
          stack: '总量',
        };
        const hashdata3 = {
          data: [],
          name: '整治中',
          type: 'line',
          stack: '总量',
        };
        for (let i = 0; i < this.tab6data2.length; i += 1) {
          hashdata.data.push(this.tab6data2[i].hash.num);
        }
        this.seriesData.push(hashdata);
        for (let i = 0; i < this.tab6data4.length; i += 1) {
          hashdata4.data.push(this.tab6data4[i].hash.num);
        }
        this.seriesData.push(hashdata4);

        for (let i = 0; i < this.tab6data3.length; i += 1) {
          hashdata3.data.push(this.tab6data3[i].hash.num);
        }
        this.seriesData.push(hashdata3);
        for (let i = 0; i < this.typeList.length; i += 1) {
          this.typename.push(this.typeList[i].hash.typename);
        }
        console.log(this.seriesData);

        this.$nextTick(() => {
          this.tab4();
        });
      });

      // 按类别完成情况
      const req3 = {
        handle: '897AEEB66312B81B368784114B8B87D74AE5AA79B1DBF8C5',
      };
      this.spost(this.ts, '/mainservlet', req3).then((ts) => {
        const data3 = ts.d.data.operation1;

        // 处理数据到tab3data里
        const name = [];
        const c1 = [];
        const c2 = [];
        const c3 = [];
        for (let i = 0; i < data3.length; i += 1) {
          name.push(data3[i].hash.code_name);
          c1.push(data3[i].hash.c1);
          c2.push(data3[i].hash.c2);
          c3.push(data3[i].hash.c3);
        }

        this.tab3data.name = name;
        this.tab3data.c1 = c1;
        this.tab3data.c2 = c2;
        this.tab3data.c3 = c3;
        this.tab3();
      });
    },
    tab1() {
      const chartColumn = echarts.init(document.getElementById('tab1'));
      const option = {
        title: {
          text: '项目总体完成情况',
          x: 'left',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['完成', '整治中', '前期工作'],
        },
        series: [
          {
            name: '项目总体完成情况',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: this.tab1data[0].hash.c3, name: '完成' },
              { value: this.tab1data[0].hash.c2, name: '整治中' },
              { value: this.tab1data[0].hash.c1, name: '前期工作' },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      chartColumn.setOption(option);
    },
    tab4() {
      const chartColumn = echarts.init(document.getElementById('tab4'));
      const option = {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['前期工作', '已完成', '整治中'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,

          axisLine: {
            show: false,
          },
          axisTick: {
            length: 0,
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置。
            formatter(params) {
              let newParamsName = ''; // 最终拼接成的字符串
              const paramsNameNumber = params.length; // 实际标签的个数
              const provideNumber = 1; // 每行能显示的字的个数
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (let p = 0; p < rowNumber; p += 1) {
                  let tempStr = ''; // 表示每一次截取的字符串
                  const start = p * provideNumber; // 开始截取的位置
                  const end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = `${params.substring(start, end)}\n`;
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              // 将最终的字符串返回
              return newParamsName;
            },
          },
          data: this.typename,
        },
        yAxis: {
          type: 'value',
        },
        series: this.seriesData,
      };
      chartColumn.setOption(option);
    },
    tab3() {
      const chartBar = echarts.init(document.getElementById('tab3'));
      const option = {
        title: {
          text: '按类别完成情况',
        },
        tooltip: {},
        legend: {
          data: ['完成', '整治中', '前期工作'],
          left: 'right',
        },
        xAxis: {
          data: this.tab3data.name,
        },
        yAxis: {},
        series: [
          {
            name: '完成',
            type: 'bar',
            stack: '总量',
            data: this.tab3data.c3,
          },
          {
            name: '整治中',
            type: 'bar',
            stack: '总量',
            data: this.tab3data.c2,
          },
          {
            name: '前期工作',
            type: 'bar',
            stack: '总量',
            data: this.tab3data.c1,
          },
        ],
      };
      chartBar.setOption(option);
    },
  },

  mounted() {
    this.drawCharts();
  },
  updated() {},
};
</script>

<style lang="stylus" scoped>
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
  margin-right: 4px
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.el-form-item
  width 50%
  float left
.el-select
  width 10%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
.top_ul {
  margin-top: 50px;

  li {
    height: 50px;
    line-height: 50px;
    font-size: 17px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;

    &:first-child {
      color: #F56C6C;
    }

    &:nth-child(2) {
      color: #E6A23C;
    }

    &:last-child {
      color: #5ca3c2;
    }
  }
}

.title_p {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.el-col {
  padding: 30px 20px;
}

.c_top1 {
  div {
    background: #fff;
    margin: 20px 0;
    text-align: center;

    p {
      height: 30px;
      line-height: 30px;
      margin-bottom: 10px;

      &:nth-child(1) {
        span {
          &:first-child {
            float: left;
          }

          &:last-child {
            float: right;
            color: #26a2ff;

            b {
              color: #409EFF;
            }
          }
        }
      }

      &:nth-child(2) {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>
